<template>
	<view class="page flex flex-col">
		<navbar :leftText="'添加设备'" :backStatus="true"></navbar>
		<view class="w690  flex-1">
			<!-- <view>
				<up-tabs :list="deviceList" @click="selectClassify" lineWidth="100" lineColor="#38FDFF" :activeStyle="{
			    color: '#38FDFF',
			    fontWeight: 'bold'
			}" :inactiveStyle="{
			    color: '#FFFFFF ',
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 30px; padding-right: 30px; height: 50px;"></up-tabs>
				<view class="classify"></view>
			</view> -->
			<view class="shouYi heightFull">
				<!-- v-if="curSelectIndex == 0" -->
				<view>
					<!-- 小节点 -->
					<up-form labelWidth="100" labelPosition="top" :model="deviceObj" :rules="rules" ref="form1">
						<up-form-item label="姓名" prop="deviceObj.name" required>
							<up-input v-model="deviceObj.name" placeholder="请输入联系人姓名" border="none"></up-input>
						</up-form-item>
						<up-form-item label="联系电话" prop="deviceObj.mobile" required>
							<up-input type="number" maxlength="11" v-model="deviceObj.mobile" placeholder="请输入电话号码"
								border="none"></up-input>
						</up-form-item>
						<up-form-item label="安装地址" prop="deviceObj.address" required>
							<up-input v-model="deviceObj.address" placeholder="请输入安装地址" border="none"></up-input>
						</up-form-item>
						<up-form-item label="设备码" prop="deviceObj.code" required>
							<div class="deviceCode">
								<up-input v-model="deviceObj.code" placeholder="设备码展示区" border="none"></up-input>
								<view class="flex-start deviceMa" @click="deviceSaoMa">
									<image style="width:32rpx;height:30rpx;margin-right:10rpx;"
										src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/saoyisao-x%402x.png"
										mode="aspectFill"></image>
									<text class="text-white text-26">扫描设备二维码</text>
								</view>
							</div>
						</up-form-item>
					</up-form>
					<view class="submit flex-center text-white text-28" @click="submitDevice">提交</view>
				</view>
				<!-- 小节点 -->
				<!-- <view v-if="curSelectIndex == 1">

					<up-form labelWidth="100" labelPosition="top" :model="deviceBigObj" :rules="rulesBig" ref="formBig">
						<up-form-item label="姓名" prop="deviceBigObj.name" required>
							<up-input v-model="deviceBigObj.name" placeholder="请输入联系人姓名" border="none"></up-input>
						</up-form-item>
						<up-form-item label="联系电话" prop="deviceBigObj.phone" required>
							<up-input v-model="deviceBigObj.phone" placeholder="请输入电话号码" border="none"></up-input>
						</up-form-item>
						<up-form-item label="安装地址" prop="deviceBigObj.address" required>
							<up-input v-model="deviceBigObj.address" placeholder="请输入安装地址" border="none"></up-input>
						</up-form-item>
						<up-form-item label="设备码" prop="deviceBigObj.code" required>
							<view class="deviceCode">
								<up-input v-model="deviceBigObj.code" placeholder="设备码展示区" border="none"></up-input>
								<view class="flex-start deviceMa" @click="deviceSaoMa" required>
									<image style="width:32rpx;height:30rpx;margin-right:10rpx;"
										src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/device/saoyisao-x%402x.png"
										mode="aspectFill"></image>
									<text class="text-white">扫描设备二维码</text>
								</view>
							</view>
						</up-form-item>
					</up-form>
					<view class="submit flex-center text-white" @click="submitBigDevice">提交大节点</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';

	import {
		test
	} from 'uview-plus';
	// let imageUrl = ref("");
	// onMounted(() => {
	// 	// 全局变量引入
	// 	const globalData = inject('globalData');
	// 	imageUrl.value = globalData.value.imgOssUrl;
	// })
	// 收益分类
	const deviceList = reactive([{
			name: '小节点'
		},
		{
			name: '大节点'
		}
	]);

	// 设备扫码
	const deviceSaoMa = () => {
		// 获取相机扫码权限
		uni.authorize({
			scope: 'scope.camera',
			success() {
				// 用户同意授权
				scanQRCode();
			},
			fail() {
				// 用户拒绝授权
				uni.showToast({
					title: '您拒绝了授权',
					icon: 'none'
				});
			}
		});
	}

	// 扫描二维码
	const scanQRCode = () => {
		uni.scanCode({
			success(res) {
				if (res.result) {
					// 扫描结果
					let resultCode = res.result;

					deviceObj.code = resultCode.split("=")[1];
				} else {
					// 扫描失败
					uni.showToast({
						title: '扫描失败',
						icon: 'none'
					});
				}
			},
			fail() {
				// 调用相机失败
				uni.showToast({
					title: '调用相机失败',
					icon: 'none'
				});
			}
		});
	}

	// 当前选中的类型下表
	const curSelectIndex = ref(0);
	// 选择分类
	const selectClassify = (val) => {
		curSelectIndex.value = val.index
	}
	// 绑定大节点表单
	const formBig = ref()
	// 大节点对象
	const deviceBigObj = reactive({
		name: "",
		mobile: "",
		address: "",
		code: "",
		deviceType: "router"
	})

	// const rulesBig = reactive({
	// 	'deviceBigObj.name': {
	// 		type: 'string',
	// 		required: true,
	// 		message: '请填写姓名',
	// 		trigger: ['blur'],
	// 	},
	// 	'deviceBigObj.mobile': {
	// 		type: 'string',
	// 		max: 1,
	// 		required: true,
	// 		message: '请填写电话',
	// 		trigger: ['blur'],
	// 	},
	// 	'deviceBigObj.address': {
	// 		type: 'string',
	// 		required: true,
	// 		message: '请填写地址',
	// 		trigger: ['blur'],
	// 	},
	// 	'deviceBigObj.code': {
	// 		type: 'string',
	// 		required: true,
	// 		message: '请填写设备码',
	// 		trigger: ['blur'],
	// 	},
	// })

	// 提交大节点
	// const submitBigDevice = () => {
	// 	formBig.value.validate().then(valid => {
	// 		if (valid) {
	// 			uni.$u.toast('校验通过')
	// 		} else {
	// 			uni.$u.toast('校验失败')
	// 		}
	// 	}).catch(() => {
	// 		// 处理验证错误  
	// 		uni.$u.toast('校验失败')
	// 	});
	// }

	// 小节点对象
	const deviceObj = reactive({
		name: "",
		mobile: "",
		address: "",
		code: "",
		deviceType: "router"
	})

	// 提交设备
	const submitDevice = () => {
		if (!deviceObj.name) {
			uni.$u.toast('请输入姓名')
			return false
		}

		if (!deviceObj.mobile) {
			uni.$u.toast('请输入姓名')
			return false
		}

		if (!test.mobile(deviceObj.mobile)) {
			uni.$u.toast('电话格式不正确')
			return false
		}

		if (!deviceObj.code) {
			uni.$u.toast('电话格式不正确')
			return false
		}

		let e = {
			url: "/app-api/device/bind",
			data: deviceObj
		}

		api.default.post(e).then((res) => {
			uni.showToast({
				title: "保存成功",
				icon: 'none'
			})

			setTimeout(() => {
				uni.switchTab({
					url: "/pages/device/index"
				})
			}, 500)
		})
	}
</script>

<style scoped>
	.deviceCode {
		width: 100%;
		position: relative;
	}

	.deviceMa {
		position: absolute;
		top: -58rpx;
		right: 0;
		z-index: 99;
	}

	.submit {
		height: 88rpx;
		background: linear-gradient(90deg, #A102FF 0%, #162CFF 100%);
		border-radius: 44rpx;
		margin-top: 60rpx !important;
	}

	.page /deep/ .u-form-item__body__left__content__label {
		color: #fff;
	}

	.page /deep/ .u-input__content {
		background-color: #141039;
		height: 80rpx !important;
		border: 2rpx solid rgba(22, 179, 255, 0.25);
	}

	.page /deep/ .uni-input-placeholder,
	.page /deep/ .input-placeholder {
		color: #5A669E !important;
		font-size: 26rpx !important;
	}

	.page /deep/ .u-input__content {
		padding: 0 20rpx !important;
	}

	.page /deep/ .uni-input-input {
		color: #fff !important;

	}

	.page /deep/ .u-form-item__body__left__content__label {
		font-size: 26rpx !important;
	}

	.page /deep/ .uni-input-wrapper {
		font-size: 26rpx !important;
	}

	.page /deep/ .u-input__content__field-wrapper__field {
		font-size: 26rpx !important;
	}

	/* .page /deep/ .u-input__content__field-wrapper, */
	.page /deep/ input {
		color: #fff !important;

	}

	.zhaoItem {
		width: 95%;
	}
</style>